<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Video Library</title>
<link rel="stylesheet" type="text/css" href="../LibraryCSS/style.css" />



<script type="text/javascript">
	$(function() {

		$('#container').tabs();
		$('#showcontent2').click(function() {
			$(this).parents('div').parents('div').eq(1).triggerTab(2);
			return false;
		});

		$('#showcontent3').click(function() {
			$(this).parents('div').parents('div').eq(1).triggerTab(3);
			return false;
		});

		$('#showcontent4').click(function() {
			$(this).parents('div').parents('div').eq(1).triggerTab(4);
			return false;
		});
	});
</script>

</head>
<body
	style="background: url(../LibraryIMG/background.jpg) repeat-x scroll left top transparent"
	class="main">
	<div>
		<!--<div id="header">
			<div class="Top1Band">-->
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>

				<td width="10%"><img src="../LibraryIMG/movietape.jpg"
					width="125" height="167" /></td>
				<td align="center" width="90%"><font color="ffffff"
					face="WildWest" size=10>My Video Library</font></td>
			</tr>

		</table>
		<nav>
		<ul class="fancyNav">
			<li id="home"><a href="../LibraryJSP/Home.jsp" class="homeIcon">Home</a></li>
			<li id="art"><a href="#">Art and Culture</a></li>
			<li id="cinema"><a href="../LibraryJSP/MovieDetails.jsp">Cinema</a></li>
			<li id="history"><a href="#">History</a></li>
			<li id="sports"><a href="#">Sports</a></li>
			<li id="music"><a href="#">Music and dance</a></li>
			<li id="science"><a href="#">Science and Health</a></li>
			<li id="tourism"><a href="#">Tourism</a></li>
			<li id="contact"><a href="#">Contact us</a></li>
			<li id="login"><a href="#" class="loginIcon">Login</a></li>
		</ul>
		</nav>
		<div>
			<table width="100%" border="0" cellspacing="0" cellpadding="0">

				<tr>

					<td style="padding-left: 300px; padding-top: 15px;"><img
						src="../LibraryIMG/collage.jpg" style="vertical-align: bottom;"
						usemap="#videomap" /> <map name="videomap">
							<area shape="rect" coords="0,0,160,240" href="#"
								title="Art and Culture" />
							<area shape="rect" coords="160,0,520,165" href="#"
								title="Tourism" />
							<area shape="rect" coords="520,0,990,275" href="#" title="Music" />
							<area shape="rect" coords="590,280,990,500" href="#"
								title="Sports" />
							<area shape="rect" coords="160,165,250,230" href="#"
								title="History" />
							<area shape="rect" coords="260,230,520,580" href="#"
								title="History" />
							<area shape="rect" coords="520,300,590,400" href="#"
								title="History" />
							<area shape="rect" coords="0,240,250,550"
								href="../LibraryJSP/MovieDetails.jsp" title="Cinema" />

						</map></td>
				</tr>
			</table>
		</div>
</body>


</html>

